import { ref } from 'vue'
let v = ref<string>('123')
let flag = true
let Arr = [1, 2, 3, 4]

type Props = {
  title: string
}
const renderDom = (props: Props, ctx: any) => {
  const clickTap = (v: number) => {
    console.log('我被点击了', v)
  }

  const clickCtx = (ctx: any) => {
    ctx.emit('on-click', 123)
  }

  return (
    <div>
      <div>JSXDemo</div>
      <input type="text" v-model={v.value} />
      <div>{v.value}</div>
      <div v-show={flag}>true </div>
      <div>
        {flag ? <div>if true</div> : <div>if false</div>}
        <div>不支持v-if 那么就用编程的思维 三元运算 flag ? a : b </div>
      </div>
      {/* <div v-if={flag}>false </div> */}
      {/* 不支持v-if={flag} */}
      <div>
        不支持 v-for 使用map代替
        <br />
        不支持v-bind 就直接写
        <br />
        不支持v-on v-on绑定事件 所有的事件都按照react风格来 -所有事件有on开头
        -所有事件名称首字母大写
        <br />
        传参使用bind
        <div>
          {Arr.map((v) => {
            return (
              <div onClick={clickTap.bind(this, v)} data-index={v}>
                {v}
              </div>
            )
          })}
        </div>
      </div>
      <div>
        props的使用
        <br />
        {props.title}
      </div>
      <div>
        ctx
        <button onClick={clickCtx.bind(this, ctx)}>ctxClick</button>
        <br />
      </div>
    </div>
  )
}

export default renderDom
